(function($){
// 登录页面
var loginUrl = 'login'; //登录接口

// 滑动条
$.fn.drag = function(options){
    var x, drag = this, isMove = false, defaults = {
    };
    
    var options = $.extend(defaults, options);
    //添加背景，文字，滑块
    var html = '<div class="drag_bg"></div>'+
                '<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>'+
                '<div class="handler handler_bg"><i class="icon-arrow-right"></i></div>';
    this.append(html);
    
    var handler = drag.find('.handler');
    var drag_bg = drag.find('.drag_bg');
    var text = drag.find('.drag_text');
    var maxWidth = drag.width() - handler.width();  //能滑动的最大间距
    
    //鼠标按下时候的x轴的位置
    handler.mousedown(function(e){
        isMove = true;
        x = e.pageX - parseInt(handler.css('left'), 10);
        console.log(x)
    });
    
    //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
    $(document).mousemove(function(e){
        var _x = e.pageX - x;
        if(isMove){
            if(_x > 0 && _x <= maxWidth){
                handler.css({'left': _x});
                drag_bg.css({'width': _x});
            }else if(_x > maxWidth){  //鼠标指针移动距离达到最大时清空事件
                dragOk();
            }
        }
    }).mouseup(function(e){
        isMove = false;
        var _x = e.pageX - x;
        if(_x < maxWidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
            handler.css({'left': 0});
            drag_bg.css({'width': 0});
        }
    });
    
    //清空事件
    function dragOk(){
        handler.removeClass('handler_bg').addClass('handler_ok_bg');
        text.text('验证通过');
        drag.css({'color': '#fff'});
        handler.unbind('mousedown');
        $('.handler i').attr('class', 'icon-check');
        $('.handler_ok_bg').css('left','calc(100% - 40px)');
        $('.drag_bg').css('width', '100%');
        $('.login-go').removeAttr('disabled');
        $(document).unbind('mousemove');
        $(document).unbind('mouseup');
    }
};
setTimeout(function(){
    $('.code').drag();
},300)

// 是否为空
$.fn.inputNull = function(){
    if($.trim(this.val()) == ''){
        this.val('');
        this.css('border-color','#F56C6C');
        return false;
    }else{
        this.attr('style','');
        return true;
    }
}
$('.login-go').click(function (e) { 
    e.preventDefault();
    var passowrd = $('#password').val(),
    username = $('#username').val();
    if($('#username').inputNull() & $('#password').inputNull()){
        $.ajax({
            type: "POST",
            url: loginUrl,
            data: {
                username: username,
                passowrd: passowrd
            },
            dataType: "json",
            success: function (response) {
                if(response == 0){

                }else{
                    alert('登录失败, 请确认账号密码是否正确');
                    window.location.reload;
                }
            },
            error: function(){
                alert('后台请求错误');
            }
        });
    }
});
})(jQuery)